<template>
  <div class="box1">
    <!-- 过滤框 -->
    <el-cascader
      placeholder="请选择要查看的状态"
      :options="FilterList"
      filterable
      :show-all-levels="false"
      :props="FilterProps"
      @change="result2"
      clearable
      v-model="nowSelect"
      class="SearchFilter"
    ></el-cascader>
    <!-- 内容展示 -->
    <div class="exhibition">
      <el-table
        id="table"
        :data="
          tables1.slice((currentPage - 1) * pageSize, currentPage * pageSize)
        "
        border
        style="width: 100%"
      >
        <el-table-column
          fixed
          prop="id"
          label="序号"
          width="60%"
          align="center"
        >
        </el-table-column>
        <el-table-column
          fixed
          prop="username"
          label="用户姓名"
          width="120px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          fixed
          prop="customspassName"
          label="延期关卡"
          width="180px"
        >
          <template slot-scope="scope">
            <el-popover
              placement="top-start"
              title="关卡名称"
              width="200"
              trigger="hover"
              :content="scope.row.customspassName"
            >
              <div slot="reference" class="twoLineCls">
                {{ scope.row.customspassName }}
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="start" label="开始时间" align="center">
        </el-table-column>
        <el-table-column prop="end" label="截止时间" align="center">
        </el-table-column>
        <el-table-column prop="deferDate" label="延期时间" align="center">
        </el-table-column>
        <el-table-column prop="reason" label="延期理由" width="240px">
          <template slot-scope="scope">
            <el-popover
              placement="top-start"
              title="延期理由"
              width="200"
              trigger="hover"
              :content="scope.row.reason"
            >
              <div slot="reference" class="twoLineCls">
                {{ scope.row.reason }}
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          width="100px"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag type="success" v-show="scope.row.status == 1" color="#fff"
              >通过</el-tag
            >
            <el-tag type="danger" v-show="scope.row.status == -1" color="#fff"
              >不通过</el-tag
            >
            <el-tag type="info" v-show="scope.row.status == 0" color="#fff"
              >未处理</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="200px"
          align="center"
        >
          <template slot-scope="scope">
            <alter-button
              type="success"
              size="small"
              v-show="scope.row.status == 0"
              @click="Pass(scope.$index, scope.row), Show()"
              >通过</alter-button
            >
            <alter-button
              @click.native.prevent="Failed(scope.$index, scope.row), Show()"
              type="danger"
              size="small"
              v-show="scope.row.status == 0"
              >不通过
            </alter-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 展示分页 -->
    <div class="paging">
      <el-pagination
        background
        :page-size="pageSize"
        :current-page="currentPage"
        layout="prev, pager, next"
        :total="tables1.length"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { mixin } from "@/mixin.js";
import { mapMutations } from "vuex";
import { getAllDelayAPI, DelayHandleAPI } from "@/api/utils";
export default {
  mixins: [mixin],
  async created() {
    const res = await getAllDelayAPI();
    this.tableData = this.Newtables1 = res.data;
    this.StatusSort();
  },
  data() {
    return {
      //搜索框
      filterText: "",
      //过滤框
      nowSelect: "",
      currentPage: 1,
      // 表单过滤
      nowSelect: "",
      FilterList: [
        { name: "未处理", StatusId: "0" },
        { name: "不通过", StatusId: "-1" },
        { name: "通过", StatusId: "1" },
      ],
      FilterProps: {
        value: "StatusId",
        label: "name",
        children: null,
      },
      tables1: [],
      Newtables1: [],
      pageSize: 7,
    };
  },
  methods: {
    // 按状态排序
    StatusSort() {
      this.tables1 = [];
      let arr1 = [];
      let arr2 = [];
      this.Newtables1.forEach((e) => {
        if (e.status == 0) {
          arr1.push(e);
        } else {
          arr2.push(e);
        }
      });
      arr2.sort(function (a, b) {
        return b.status - a.status;
      });
      this.tables1 = this.tables1.concat(arr1, arr2);
    },
    // 页面刷新
    ...mapMutations("Refresh", { Show: "Show" }),
    // 页面刷新
    PageRefresh() {
      this.$nextTick(function () {
        this.$store.state.Refresh.isRouterAlive = true;
      });
    },
    // 表单过滤
    result2() {
      if (this.nowSelect.length == 0) {
        this.StatusSort();
      } else {
        this.StatusSort();
        this.tables1 = this.tables1.filter((s) => {
          return s.status == this.nowSelect[0];
        });
      }
    },
    // 开始处理状态
    async StartProcess(s, i) {
      return DelayHandleAPI(s, i).then((res) => {
        if (res.data.flag) {
          this.$message.success("状态修改成功!");
          this.PageRefresh();
        } else {
          this.$message.success("状态修改成功!");
          this.PageRefresh();
        }
      });
    },
    // 验收通过
    Pass(index, row) {
      this.StartProcess("Y", row.id);
    },
    // 验收失败
    Failed(index, row) {
      this.StartProcess("N", row.id);
    },
    // 状态处理
    StateHandle() {
      this.tables1.forEach((e) => {
        if (e.status == "-1") {
          e.status = "验收失败";
        } else if (e.status == "0") {
          e.status = "未处理";
        } else if (e.status == "1") {
          e.status = "验收成功";
        }
      });
    },
  },
};
</script>

<style scoped>
.exhibition {
  width: 100%;
  height: 460px;
  margin-top: 10px;
}
.paging {
  width: 100%;
  height: 30px;
  margin-bottom: 0;
  text-align: center;
}
/* 表单操作按钮样式处理 */
.exhibition /deep/ .el-button + .el-button {
  margin-left: 0;
}
.exhibition /deep/ .el-button--small {
  padding: 8px;
}
.exhibition /deep/ .el-button {
  width: 70px;
  margin-right: 10px;
}
.exhibition /deep/ .el-tag {
  border-color: #fff;
}
.twoLineCls {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}
.SearchFilter /deep/.el-input__inner {
  border: 3px solid #dcdfe6;
}

.el-table--border {
  border: 3px solid #ebeef5;
}
.exhibition /deep/.el-table .cell {
  color: #666;
}
.exhibition /deep/.twoLineCls {
  color: black;
}
.exhibition /deep/.el-table th.el-table__cell,
.exhibition /deep/.el-table tr,
.exhibition /deep/.el-table {
  background-color: rgba(255, 255, 255, 0.3);
}
</style>